<template>
	<view>
		<p :id="compRef" @click="toDetails(model)" :ref="compRef" :class="['text-content',flag?'max-three-line':'']">{{ model.Content }}</p>
		<div v-if="!hideBtn" class="more-info">
			<a class="text-blue" @click="flag = !flag">{{flag?'展开全部':'收起'}}</a>
		</div>
	</view>
</template>

<script>
	export default {
		name: "textMore",
		props: {
			//内容文本
			model: {
				type: Object,
				default: null
			},
			compRef: {
				type: String,
				default: "contentEl"
			},
		},
		data() {
			return {
				flag: false, //是否隐藏内容
				hideBtn: false,
				elHeight:0
			};
		},
		mounted() {
			this.$nextTick(()=>{
				let el = this.$refs[this.compRef]
				if(el==undefined && this.model.Content.length > 100){
					this.elHeight = 90
				}else if(el!=undefined){
					this.elHeight = el?.offsetHeight
				}
				//三行的高度为88.8
				this.hideBtn = this.elHeight <= 88.8
				//测量之后,修改flag,设置样式
				this.flag = true
			})
		},
		methods: {
			// 调转详情
			toDetails(val) {
				var str = encodeURIComponent(JSON.stringify(val));
				this.$Common.navigateTo("/community/communityDetail", {
					str
				});
			},
		}
	}
</script>

<style scoped>
	.more-info {
		text-align: right;
	}

	.max-three-line {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.text-content {
		line-height: 40rpx;
		;
		font-size: 30rpx;
		margin: 20rpx 0;
	}

	.text-blue {
		color: #526B94;
	}
</style>
